$def with (name)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
	<title>Firelog Web Interface</title>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
	<meta http-equiv="Transfer-Encoding" content="chunked" />
	<meta name="description" content="Firelog Web Interface" />
	<meta name="keywords" content="Firelog Web Interface" />
	<meta name="robots" content="index, follow" />
	<!--Refresh the page automatically, time specified in seconds
    <meta http-equiv="refresh" content="60">-->
	<link rel="shortcut icon" href="../images/web-server.png" type="image/x-cicon" />
	<!-- css stylesheet -->
    <style type="text/css">
	        body {
	        margin:0;
	        padding:0;	
	        width:100%;
	        background:#fff;
	        min-width:600px;		/* Minimum width of layout - remove line if not required */
					        /* The min-width property does not work in old versions of Internet Explorer */
	        font-size:90%;
	        
        }
        h2 { 
        	color: #0000FF; 
        }
        h3 { 
        	color: #0000FF; 
        }
        a {
	        color:#369;
        }
        a:hover {
	        color:#fff;
	        background:#369;
	        text-decoration:none;
        }
        h1, h2, h3 {
	        margin:.8em 0 .4em 0;
	        padding:0;
        }
        p {
	        margin:.4em 0 .8em 0;
	        padding:0;
        }
        img {
	        margin:10px 0 5px;
        }

        /* Header styles */
        #header {
	        clear:both;
	        float:left;
	        width:100%;
	        text-align: center;
	        bgcolor: #0000ff;
	        /*background: url(images/background2.jpg);*/
	        background: #66CCFF;
	        font-size:150%;
	        
        }
        
        
        
        #header p,
        #header h1,
        #header h2 {
	        padding:.4em 15px 0 15px;
	        margin:0;
        }
        #header ul {
	        clear:left;
	        float:left;
	        width:100%;
	        list-style:none;
	        margin:10px 0 0 0;
	        padding:0;
        }
        #header ul li {
	        display:inline;
	        list-style:none;
	        margin:0;
	        padding:0;
        }
        #header ul li a {
	        display:block;
	        float:left;
	        margin:0 0 0 1px;
	        padding:3px 10px;
	        text-align:center;
	        background:#eee;
	        color:#000;
	        text-decoration:none;
	        position:relative;
	        left:15px;
	        line-height:1.3em;
        }
        #header ul li a:hover {
	        background:#369;
	        color:#fff;
        }
        #header ul li a.active,
        #header ul li a.active:hover {
	        color:#fff;
	        background:#000;
	        font-weight:bold;
        }
        #header ul li a span {
	        display:block;
        }
        
        /* 'widths' sub menu */
        #layoutdims {
	        clear:both;
	        background:#eee;
	        margin:0;
	        padding:6px 15px !important;
	        text-align:right;
        }
        /* column container */
        .colmask {
	        position:relative;	/* This fixes the IE7 overflow hidden bug */
	        clear:both;
	        float:left;
	        width:100%;			/* width of whole page */
	        overflow:hidden;		/* This chops off any overhanging divs */
        }
        /* common column settings */
        .colright,
        .colmid,
        .colleft {
	        float:left;
	        width:100%;			/* width of page */
	        position:relative;
        }
        .col1,
        .col2,
        .col3 {
	        float:left;
	        position:relative;
	        padding:0 0 1em 0;	/* no left and right padding on columns, we just make them narrower instead 
					        only padding top and bottom is included here, make it whatever value you need */
	        overflow:hidden;
        }
        /* 3 Column settings */
        .threecol {
        	border-top:6px groove blue;
	        background:#BBD9EE;		/* right column background colour */
        }
        .threecol .colmid {
        	right:22%;			/* width of the right column */
	        background:#EBF4FA;		/* center column background colour */
        }
        .threecol .colleft {
        	right:58%;			/* width of the middle column */
	        background:#BBD9EE;	/* left column background colour */
        }
        .threecol .col1 {
        	width:46%;			/* width of center column content (column width minus padding on either side) */
	        left:107%;			/* 100% plus left padding of center column */
	        text-align: center;
        }
        .threecol .col2 {
        	width:16%;			/* Width of left column content (column width minus padding on either side) */
	        left:36%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
        }
        .threecol .col3 {
        	width:16%;			/* Width of right column content (column width minus padding on either side) */
	        left:100%;			/* Please make note of the brackets here:
					        (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus
					        (right column left padding) */
			text-align: center;
        }
        /* Footer styles */
        #footer {
	        clear:both;
	        float:left;
	        width:100%;
	        background: black;
            color: #FFF;
            text-align: center;
        }
        #footer p {
	        padding:10px;
	        margin:0;
        }                        
    </style>
    <script language="javascript" type="text/javascript" >
    function AutoRefresh(timeout) {
        setTimeout("location.reload(true);", timeout);
    }
    </script>
    
    <script type="text/javascript" src="http://j.maxmind.com/app/geoip.js"></script>  
    
    
    <script>
		(function() {
    		var har = document.createElement("script");
    		har.src = "http://firelog.eurecom.fr/salvo/harViewer/har.js";
    		har.setAttribute("id", "har");
    		har.setAttribute("async", "true");
    		document.documentElement.firstChild.appendChild(har);
	})();
	</script>
	 
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    
    
    
    <script type='text/javascript'>
    	google.load('visualization', '1', {packages:['corechart']});
    	google.setOnLoadCallback(drawChart);
    	function drawChart() {
    		
    		var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    		var str_data = document.getElementById("chart_div").getAttribute("data");
  			var arr_data = str_data.split(',');
  			var name = document.getElementById("chart_div").getAttribute("name");
			
			if (name=='diagnose') {
				var data = google.visualization.arrayToDataTable(
    			[[arr_data[0], 	arr_data[1]],
    			[arr_data[2], 	parseInt(arr_data[3])],
    			[arr_data[4],   parseInt(arr_data[5])],
    			[arr_data[6],  	parseInt(arr_data[7])],
    			[arr_data[8], 	parseInt(arr_data[9])]]    			
    			);
			}
			else if (name=='metrics') {
  				var data = google.visualization.arrayToDataTable(
    			[[arr_data[0], arr_data[1]],
    			[arr_data[2], 	parseInt(arr_data[3])],
    			[arr_data[4],   parseInt(arr_data[5])],
    			[arr_data[6],  	parseInt(arr_data[7])]]    			
    			);
			} 
			else {
  				alert('no data for pie chart');
			}
    		    		
    		var options = {
    			//title: 'Limitation Causes for High PLT',
    			backgroundColor: '#EBF4FA',
    			chartArea:{left:20,top:20,width:'90%',height:'90%'},
    			is3D: 'true',
    			legend:{    position: 'right', 
    						textStyle: {color: 'blue', fontSize: 16},
    						alignment: 'center'}
    			};
   		
    		chart.draw(data, options); 
    	}
    	</script>                 

    
</head>
<body>

<div id="header">	
	<div id="container" STYLE='position:absolute; top:8px; right:50px'>
    	<img src="../images/eurecom_small.png" alt="Eurecom logo"  width="150"/>
	</div>
	<div id="container" STYLE='position:absolute; top:8px; left:50px'>
		<img src="../images/eurecom_small.png" alt="Eurecom logo" width="150"/>
	</div>
	<h1><font size='7' color="#0000FF"><b>Firelog</b></font><font color="#04B431"><i>WebInterface</i></font></h1>
	
	<h2>
	
	<!-- 
	    <br/>
	    Web Interface running on:
	    <script type="text/javascript">            
            document.write(document.domain)
        </script>
       
	    <script type="text/javascript">
            var currentTime = new Date()
            var month = currentTime.getMonth() + 1
            var day = currentTime.getDate()
            var year = currentTime.getFullYear()
            document.write(day + "." + month + "." + year)
        </script>
	</h2>
	
	questo è un commento -->
	
	<BR>
</div>

<!--  <div class="har" data-har="http://firelog.eurecom.fr/har_file/test_by_apache.harp"></div>           questo è un commento -->

<div class="colmask threecol">
	<div class="colmid">
		<div class="colleft">

		